<!DOCTYPE html>
<html class="dark" lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>终端管理系统</title>
  <link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
  <link as="style" href="https://fonts.googleapis.com/css2?display=swap&family=Inter:wght@400;500;700;900" onload="this.rel='stylesheet'" rel="stylesheet"/>
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  <script>
    tailwind.config = {
      darkMode: "class",
      theme: {
        extend: {
          colors: {
            primary: "#1754cf",
            "background-light": "#f6f6f8",
            "background-dark": "#111621",
          },
          fontFamily: {
            display: ["Inter"],
          },
          borderRadius: {
            DEFAULT: "0.25rem",
            lg: "0.5rem",
            xl: "0.75rem",
            full: "9999px",
          },
        },
      },
    };
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
  <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-gray-800 dark:text-gray-200">
  <div class="flex h-screen">
    <aside class="flex flex-col w-80 bg-background-light dark:bg-background-dark border-r border-gray-200 dark:border-gray-800">
      <div class="p-4 border-b border-gray-200 dark:border-gray-800">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 text-primary">
            <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
              <path d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z" fill="currentColor"></path>
            </svg>
          </div>
          <h1 class="text-xl font-bold text-gray-900 dark:text-white">终端管理</h1>
        </div>
      </div>
      <div class="flex flex-col p-2 space-y-1 overflow-y-auto">
        <a id="nav-dashboard" class="nav-item flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg bg-primary/10 text-primary dark:bg-primary/20 cursor-pointer">
          <span class="material-symbols-outlined text-lg">home</span>
          仪表盘
        </a>
        <a id="nav-prompt" class="nav-item flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 cursor-pointer">
          <span class="material-symbols-outlined text-lg">description</span>
          AI 提示词
        </a>
      </div>
      <div class="mt-auto p-4 border-t border-gray-200 dark:border-gray-800">
        <h2 class="text-lg font-semibold mb-3 text-gray-900 dark:text-white px-2">终端列表</h2>
        <div id="terminal-list" class="flex flex-col space-y-1">
          <div class="text-center text-gray-500 dark:text-gray-400 py-4">
            <span class="material-symbols-outlined text-4xl mb-2">terminal</span>
            <p class="text-sm">暂无终端</p>
          </div>
        </div>
      </div>
    </aside>
    <main class="flex-1 flex flex-col">
      <header class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800 bg-background-light dark:bg-background-dark">
        <div class="flex items-center gap-4">
          <div class="relative" id="user-filter-container">
            <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500">person</span>
            <select id="user-filter" class="pl-10 pr-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white text-sm focus:ring-primary focus:border-primary">
              <option value="">所有用户</option>
            </select>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <button id="new-terminal-btn" class="px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg flex items-center gap-2 hover:bg-primary/90 transition-colors">
            <span class="material-symbols-outlined text-base">add</span>
            新建终端
          </button>
          <button id="stop-all-btn" class="px-4 py-2 text-sm font-medium text-white bg-red-600 dark:bg-red-700 rounded-lg flex items-center gap-2 hover:bg-red-700 dark:hover:bg-red-800 transition-colors">
            <span class="material-symbols-outlined text-base">power_settings_new</span>
            停止所有
          </button>
          <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400">
            <span class="material-symbols-outlined">wb_sunny</span>
          </button>
        </div>
      </header>
      <div class="flex-1 p-4 flex flex-col">
        <div id="main-content" class="flex-1 flex flex-col">
          <div id="dashboard-view" class="flex-1 flex flex-col">
            <div id="terminal-container" class="flex-1 bg-black rounded-xl overflow-hidden mb-3">
              <div class="h-full flex items-center justify-center text-gray-400">
                <div class="text-center">
                  <span class="material-symbols-outlined text-6xl mb-4">terminal</span>
                  <p class="text-lg">选择一个终端或创建新终端</p>
                </div>
              </div>
            </div>
            <div id="command-input-container" class="hidden bg-gray-100 dark:bg-gray-800 rounded-lg p-3">
              <div class="flex gap-2">
                <input type="text" id="command-input" placeholder="输入命令..." class="flex-1 px-3 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent" />
                <button id="send-command-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2">
                  <span class="material-symbols-outlined text-base">send</span>
                  发送
                </button>
              </div>
            </div>
          </div>
          <div id="prompt-view" class="hidden flex-1 flex flex-col bg-white dark:bg-gray-900 rounded-xl overflow-hidden">
            <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
              <h2 class="text-xl font-bold text-gray-900 dark:text-white">AI 提示词</h2>
              <button id="copy-prompt-btn" class="px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg flex items-center gap-2 hover:bg-primary/90 transition-colors">
                <span class="material-symbols-outlined text-base">content_copy</span>
                复制
              </button>
            </div>
            <div class="flex-1 overflow-y-auto p-6">
              <pre id="prompt-content" class="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap font-mono"></pre>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <div id="new-terminal-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-md mx-4">
      <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">创建新终端</h3>
      <form id="new-terminal-form" class="space-y-4">
        <div>
          <label class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">用户 ID</label>
          <input type="text" id="userId" required class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white" placeholder="claude-assistant-1"/>
        </div>
        <div>
          <label class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">工作目录</label>
          <input type="text" id="cwd" required class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white" placeholder="/home/user"/>
        </div>
        <div>
          <label class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Shell（可选）</label>
          <input type="text" id="shell" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-900 dark:text-white" placeholder="/bin/bash"/>
        </div>
        <div class="flex gap-3 pt-2">
          <button type="submit" class="flex-1 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">创建</button>
          <button type="button" id="cancel-modal" class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">取消</button>
        </div>
      </form>
    </div>
  </div>

  <div id="confirm-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-md mx-4">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white">确认操作</h3>
      <p id="confirm-message" class="text-gray-600 dark:text-gray-400 mb-6"></p>
      <div class="flex gap-3">
        <button id="confirm-yes" class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">确认</button>
        <button id="confirm-no" class="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">取消</button>
      </div>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>
